<template>
  <div id="telFunction">
    	<div class="telFunction_top">
    		<i class="el-icon-arrow-left" @click="goBack"></i>
    		<p class="top_name">聊天设置</p>
    	</div>
    	<div class="telFunction_bd">
    		<div class="telFunction_bd_1" @click="routerTo(list)">
    			<img :src="baseurl + list.avatar" class="bd_img"/>
    			<p class="bd_name">{{list.username}}</p>
    			<i class="el-icon-arrow-right"></i>
    		</div>
    		<div class="telFunction_bd_2">
    			<ul class="bd_ul">
    				<li class="bd_ul_li">
    					<p class="p_1">
    						<span class="p_span1">查找聊天内容</span>
    						<span class="p_span2">图片、视频、文件等</span>
    						<i class="el-icon-arrow-right" id="right"></i>
    					</p>
    				</li>
    				<li class="bd_ul_li">
    					<p class="p_2">清空聊天内容</p>
    				</li>
    			</ul>
    			
    		</div>
    	</div>
    	
  </div>
</template>

<script>
	export default {
	  name: 'telFunction',
	  data () {
	    return {
	    	list:'',
	    	baseurl:''
	    }
	  },
	  methods:{
	  	goBack(){
	  		history.back(-1)
	  	},
	  	routerTo(list){
				this.$router.push({
					path:'TelDetail',
					query:{
						list:list
						
					}
				})
			},
	  },
	  created(){
//	  	debugger
	  	this.list = this.$route.query.array
	    this.baseurl =this.NET.BASE_URL
	  },
	 
	}
</script>

<style scoped="scoped">
	#tellFunction{
		width: 100%;
		height: 100%;
		font-size:0.14rem;
	}
	
	.telFunction_top{
		width: 100%;
		height: 0.45rem;
		position: fixed;
		z-index: 999;
		display: flex;
		background-color: lightblue;
	}
	
	.el-icon-arrow-left{
		font-size: 0.25rem;
		margin-top: 0.08rem;
		margin-left: 0.1rem;
	}
	
	.top_name{
		font-size: 0.2rem;
		margin-left: 1.2rem;
		padding-top: 0.03rem;
	}
	
	.telFunction_bd{
		width: 100%;
		padding-top: 0.45rem;
		background-color: gainsboro;
	}
	
	.telFunction_bd_1{
		width: 100%;
		height: 0.8rem;
		display: flex;
		background-color: white;
	}
	
	.bd_img{
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.2rem;
		margin-left: 0.1rem;
		border-radius: 0.6rem;
	}
	
	.bd_name{
		width: 2.65rem;
		font-size: 0.2rem;
		margin-left: 0.1rem;
		margin-top: 0.2rem;
	}
	
	.el-icon-arrow-right{
		width: 0.5rem;
		font-size: 0.2rem;
		font-weight: bold;
		text-align: center;
		margin-top: 0.25rem;
		color: gray;
		
	}
	
	.telFunction_bd_2{
		width: 100%;
		height: 2rem;
		margin-top: 0.1rem;
		background-color: white;
	}
	.bd_ul{
		width: 100%;
		height: 2rem;
		list-style: none;
	}
	
	.bd_ul_li{
		width: 100%;
		height: 0.5rem;
	}
	
	.p_1{
		display: block;
		width: 100%;
		height: 0.5rem;
		display: flex;
		border-bottom: 0.01rem solid gray;
	}
	
	.p_span1{
		display: block;
		font-size: 0.2rem;
		margin-left: 0.1rem;
		margin-top: 0.05rem;
	}
	
	.p_span2{
		display: block;
		font-size: 0.15rem;
		margin-left: 0.1rem;
		margin-top: 0.08rem;
		margin-left: 0.75rem;
		color: gray;
	}
	
	#right{
		margin-left: -0.15rem;
		margin-top:0.1rem;
		font-size: 0.2rem;
	}
	
	.p_2{
		font-size: 0.2rem;
		margin-left: 0.1rem;
		color: blue;
		margin-top: 0.1rem;
	}
	
</style>
